<!doctype html>
<html lang="end">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Ikanda</title>
    <link rel="icon" type="img/png" sizes="16x16" href="{{ url_for('static', filename='images/logo16.png') }}">
    <link rel="icon" type="img/png" sizes="32x32" href="{{ url_for('static', filename='images/logo32.png') }}">
    <link rel="icon" type="img/png" sizes="96x96" href="{{ url_for('static', filename='images/logo96.png') }}">
    <link rel="icon" type="img/png" sizes="144x144" href="{{ url_for('static', filename='images/logo144.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='pwa-manifest.json') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/open-iconic-bootstrap.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url_for('static', filename='themes/%s/css/bootstrap.min.css' % theme.name) }}" type="text/css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='js/moment-with-locales.min.js') }}"></script>
    {{ moment.locale(auto_detect=True) }}
    <script src="{{ url_for('static', filename='js/common.js') }}"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow">
    <div class="navbar-brand col-3 col-sm-2 mr-0">
        <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='images/logo.svg') }}" alt="ikanda logo" class="logo-small"/>
            <span class="navbar-app-title d-none d-md-inline ml-2">Ikanda</span>
        </a>
        <a class="sidebar-toggle btn oi oi-menu d-inline d-md-none"></a>
    </div>
    <form id="search-form" class="col-7 col-sm-6 col-md-5 px-0 text-right" target="search-dummy">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text oi oi-magnifying-glass"></span>
            </div>
            <input type="search" class="form-control" id="search-key" name="search-key" value="{{ search_key | default('') }}" autocomplete="off" placeholder="名称、标题、描述等" maxlength="40"/>
        </div>
    </form>
    <iframe id="search-dummy" class="d-none"></iframe>
    <!--<cite class="d-none d-md-block">An easy to use tool to deploy application to multiple nodes</cite>-->
    <ul class="navbar-nav px-2">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#"><span class="icon oi oi-account-login"></span><span class="d-none d-md-inline ml-2">退出</span></a>
        </li>
    </ul>
</nav>
<!-- outer container -->
<div class="container-fluid">
    <div class="row">
        <!-- side bar -->
        {% set sidebar_items = (
        { 'name': 'projects', 'title': '项目', 'img': 'project', 'ep': 'projects.index' },
        { 'name': 'nodes', 'title': '节点', 'img': 'target', 'ep': 'nodes.index' },
        { 'name': 'jobs', 'title': '任务', 'img': 'task', 'ep': 'nodes.index' },
        { 'name': 'reports', 'title': '报表', 'img': 'spreadsheet', 'ep': 'nodes.index' },
        ) %}
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                {% set path0 = path_to[0] %}
                <ul class="nav flex-column">
                    {% for sidebar_item in sidebar_items %}
                    <li class="nav-item">
                        {% if path0 == sidebar_item.name %}
                        <a class="nav-link active">
                            <span class="icon oi oi-{{ sidebar_item.img }} mr-1"></span>
                            {{ sidebar_item.title }}<span class="sr-only">（当前选中）</span>
                        </a>
                        {% else %}
                        <a class="nav-link" href="{{ url_for(sidebar_item.ep) }}">
                            <span class="icon oi oi-{{ sidebar_item.img }}"></span>
                            {{ sidebar_item.title }}
                        </a>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>任务队列</span>
                    <a class="d-flex align-items-center text-muted" href="#">
                        <span class="oi oi-plus"></span>
                    </a>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Current month
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Last quarter
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Social engagement
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Year-end sale
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- main content -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4" style="min-height: 95vh">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2">
                <h1 class="h2">{% block title %}{% endblock %}</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group mr-2">
                        <button class="btn btn-sm btn-secondary">Share</button>
                        <button class="btn btn-sm btn-secondary">Export</button>
                    </div>
                    <button class="btn btn-sm btn-secondary dropdown-toggle">
                        <span data-feather="calendar"></span>
                        This week
                    </button>
                </div>
            </div>
            {% block content %}
            {% endblock %}
        </main>
        <!-- footer -->
        <footer class="col-md-9 ml-sm-auto col-lg-10 px-4 text-right">
            <cite class="text-info mr-2">&copy;Copyright by <em>Haart</em> 2018, 2019 </cite><span class="text-secondary">此页面生成于：{{ moment().fromNow(refresh=True) }}</span>
        </footer>
    </div>
</div>
<script>
'use strict';
const flask_moment_render = elem => {
    const timestamp = $(elem).data('timestamp');
    const duration = $(elem).data('duration');
    if (timestamp) {
        $(elem).text(eval('moment("' + timestamp + '").' + $(elem).data('format') + ';'));
    } else if (duration) {
        $(elem).text(eval('moment.duration("' + duration + '").humanize(true);'));
    }
    $(elem).removeClass('flask-moment').show();
};
const flask_moment_render_all = () => {
    $('.flask-moment').each(function() {
        flask_moment_render(this);
        if ($(this).data('refresh')) {
            (function(elem, interval) { setInterval(function() { flask_moment_render(elem) }, interval); })(this, $(this).data('refresh'));
        }
    })
};
$(document).ready(function() {
    flask_moment_render_all();

    $('input[type=search]').focus(evt => {
        let et = $(evt.target);
        let ev = et.val();
        et.val('').val(ev);
    }).focus();
    $('#search-form').submit(evt => {
        let v =  $(evt.target).combineFormValues('search-key');
        let pathname = window.location.pathname;
        let evm = /\(.*\)$/gi.exec(pathname)
        if (evm) {
            let ov = evm[0]
            pathname = pathname.slice(0, -ov.length);
        }
        if (v) {
            window.location = pathname + '(' + encodeURIComponent(v) + ')';
        } else {
            window.location.pathname = pathname
        }

        evt.preventDefault();
    });
    $('.sidebar-toggle').click(evt => {
        $('.sidebar').toggleClass('d-none');
    });
});

</script>
</body>
</html>
